<!--
 * @Description: 全局 树 组件
-->
<template>
  <div class="g-tree">
    <CarbonTree v-bind="{ ...$props, ...$attrs }" ref="treeRef">
      <template #default="{ node, data }">
        <div class="custom-tree-node" :class="node.disabled ? 'disabled' : ''">
          <span class="g-ell">
            <slot name="leftIcon" :node="node" :data="data"></slot>
            {{ node.label || '请编辑组织信息' }}
          </span>
          <slot name="rightIcon" :node="node" :data="data"></slot>
        </div>
      </template>
    </CarbonTree>
  </div>
</template>
<script lang="ts" setup>
// NOTE @xfchenju/element-plus仅在el-tree的拖动方法上做了修改，增加了dragOver的节流
import { ElTree as CarbonTree } from '@xfchenju/element-plus';
import { Ref, ref, defineExpose } from 'vue';
const bgLength = ref(1000);
const treeRef: Ref = ref();
defineExpose({
  treeRef
});
</script>

<style lang="scss" scoped>
.g-tree {
  position: relative;
  .el-tree {
    position: relative;
    z-index: 1;
    background: transparent;
    :deep(.el-tree-node__content) {
      position: relative;
      height: 36px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 400;
      color: #435970 !important;

      // .el-icon svg {
      //   color: #435970;
      // }
      .handle-button {
        z-index: 10;
        // display: none;
        display: flex;
        opacity: 0;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        background-color: #edf2f7;
        position: absolute;
        top: -8px;
        right: 8px;
        &::before {
          content: '';
          background: linear-gradient(90deg, rgba(243, 247, 251, 0) 0%, #f3f7fb 100%);
          width: 12px;
          height: 36px;
          position: absolute;
          top: -2px;
          left: -12px;
        }
      }
    }
    :deep(.el-tree-node__content:hover) {
      // 所有节点 hover 效果
      // border: unset;
      // border-color: 'transparent';
      background: #f3f7fb;
      box-sizing: border-box;
      .handle-button {
        // display: flex;
        opacity: 1;
      }
    }
    :deep(.is-current:not(.tree-disabled) > .el-tree-node__content) {
      // 当前点击节点效果（禁用除外）
      border-left: 2px solid #03ac82;
      background-color: #f3f7fb;
      color: #435970;
    }

    :deep(.el-tree-node:focus > .el-tree-node__content) {
      background-color: #f3f7fb;
    }

    :deep(.el-tree-node__expand-icon) {
      color: #435970;
    }
    :deep(.el-tree-node__expand-icon.is-leaf) {
      color: transparent;
    }
    :deep(.is-drop-inner > .el-tree-node__content) {
      // border: 1px solid #03ac82;
      border-color: #03ac82;
      // box-sizing: border-box;
      // background: #03ac82;
    }
    .custom-tree-node {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    .custom-tree-node.disabled {
      color: #a9aeb3;
      cursor: not-allowed;
    }
  }
}
</style>
